import { ElIcon } from 'element-plus'
import type { VNode } from 'vue'

import AppIcon from '@/components/application/src/AppIcon.vue'

export interface MenuModel {
  title: string
  icon?: (className: string) => VNode
  name: string
  children?: MenuModel[]
}

export const menus: MenuModel[] = [
  {
    title: '域名管理',
    name: 'DomainView',
    icon: (className: string) => (
      <ElIcon class={className}>
        <AppIcon name="domain" />
      </ElIcon>
    ),
    children: [
      { title: '域名列表', name: 'DomainList' },
      { title: '分组管理', name: 'DomainGroup' }
    ]
  },
  {
    title: '用户管理',
    name: 'User',
    icon: (className: string) => (
      <ElIcon class={className}>
        <AppIcon name="user" />
      </ElIcon>
    ),
    children: [
      { title: '用户列表', name: 'UserList' },
      { title: '分组管理', name: 'UserGroupList' }
    ]
  },
  {
    title: 'DNS配置',
    name: 'DNS',
    icon: (className: string) => (
      <ElIcon class={className}>
        <AppIcon name="dns" />
      </ElIcon>
    )
  },

  {
    title: '超管管理',
    name: 'Admin',
    icon: (className: string) => (
      <ElIcon class={className}>
        <AppIcon name="admin" />
      </ElIcon>
    )
  },
  {
    title: '系统管理',
    name: 'Setup',
    icon: (className: string) => (
      <ElIcon class={className}>
        <AppIcon name="setting" />
      </ElIcon>
    ),
    children: [
      { title: '网站配置', name: 'WebsiteSetup' },
      { title: '系统配置', name: 'SystemSetup' }
    ]
  }
  // {
  //   title: '操作日志',
  //   name: 'Log',
  //   icon: (className: string) => (
  //     <ElIcon class={className}>
  //       <AppIcon name="log" />
  //     </ElIcon>
  //   )
  // }
]
